<template>
	<div class="safe-page">

		<!-- 安全强度 -->

		<div class="strength unified-cursor-default flex unified-flex-align unified-flex-space-around">
			<p>您当前的帐号安全程度：</p>
			<el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress>
			<p>

				安全级别：<span>低</span>
			</p>


		</div>

		<div class="box unified-cursor-default flex unified-flex-space-between">
		
			<div class="text-box flex  unified-flex-center">
		
				<p class="top">密保问题 <span class="status ">未设置</span></p>
				<p class="bottom">为了您的账户安全，请设置密保问题。</p>
		
			</div>
			<div class="option flex unified-flex-align unified-flex-center">
				<el-button type="primary">立即设置</el-button>
			</div>
		</div>

		<div class="box unified-cursor-default flex unified-flex-space-between">
		
			<div class="text-box flex  unified-flex-center">
		
				<p class="top">修改密码 <span class="status ">安全度：低</span></p>
				<p class="bottom">为了您的账户安全，请绑定邮箱。</p>
		
			</div>
			<div class="option flex unified-flex-align unified-flex-center">
				<el-button type="success">立即修改</el-button>
			</div>
		</div>


		

		<div class="box unified-cursor-default  flex unified-flex-space-between">

			<div class="text-box flex  unified-flex-center">
				<p class="top">账号注销</p>
				<p class="bottom">永久删除您的个人账号,删除后无法登录。
				</p>

			</div>
			<div class="option flex unified-flex-align unified-flex-center">
				<el-button type="danger">注销</el-button>
			</div>
		</div>






	</div>
</template>

<script>
</script>

<style scoped="scoped">
	.safe-page {
		padding-bottom: 30px;
	}


	.strength {
		width: 90%;
		margin: 0 auto;
		flex-direction: column;
		height: 240px;
		margin-top: 15px;
		padding-bottom: 10px;
	}
	.strength,.box{
		border-bottom: 1px solid #c3c3c344;
	}

	.box {
		width: 90%;
		margin: 0 auto;
		height: 90px;
	}


	.text-box {
		flex: 1;
		height: 100%;
		flex-direction: column;
		padding-left: 0px;
	}

	.option {
		width: 200px;
		height: 100%;
		justify-content: flex-end;
	}
	.top{
		font-size: 18px;
	}
	.bottom {
		font-size: 8px;
		color: #55555588;
		margin-top: 12px;
	}
	.status{
		margin-left: 10px;
		font-size: 8px;
		text-decoration: underline;
		color: #2269F3;
	}
</style>
